import React, { Component,createRef } from 'react'
import axios from 'axios'

export default class App extends Component {
  constructor(props){
    //super()必须放在首行
    super(props)
    console.log('--------constructor---------');
    /*
       constructor中完成如下几个工作
       1、定义state，进行初始化
       2、改变this指向
       3、创建ref对象
    */
    this.state={
      count:0,
      list:[]
    }
    this.increment=this.increment.bind(this)
    this.boxRef=createRef()

  }
  /*
    componentWillMount是在constructor之后的运行，该方法在页面也渲染之前执行
    react官网上已经不建议大家使用该方法，如果一定要使用会在控制台报黄色警告，可以使用 UNSAFE_componentWillMount
    来去掉黄色警告，但如果要在react的严格模式下不管什么情况下，即使使用了 UNSAFE_componentWillMount会报红色警告
  */
  UNSAFE_componentWillMount(){
    console.log('--------componentWillMount-----------');
  }
  /*
    副作用：不是主要作用（使用state或props完成组件的渲染工作）的是副作用
    1、向后端发送网络请求
    2、定义原生事件
    3、可以定义定时器
  */
  componentDidMount(){
    console.log('---------------componentDidMount------');
    this.fetchPost()
  }
  async fetchPost(){
    //const result=await axios.get('http://jsonplaceholder.typicode.com/photos')
    let result=await fetch('http://jsonplaceholder.typicode.com/photos').then(response=>{
        return response.json()
    })
    this.setState({
      list:result
    })
  }
  increment(){
    this.setState({
      count:this.state.count+1
    })
  }
  render() {
    console.log('----------render---------------');
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.increment}>+1</button>
        <hr />
        <div
          ref={this.boxRef} 
          style={{
            width:'80px',
            height:'80px',
            border:'1px solid #000',
            borderRadius:'50%'
        }}
        onClick={()=>{
          this.boxRef.current.style.backgroundColor="springgreen"
        }}></div>
        <hr />
        <table>
        {
          this.state.list.map((item,index)=><tr key={index}>
            <td>{item.id}</td>
            <td>{item.albumId}</td>
            <td>{item.title}</td>
            <td>{item.url}</td>
            <td><img src={item.thumbnailUrl} style={{width:'80px'}}/></td>
          </tr>)
        }
        </table>
      </div>
    )
  }
}
